<template>
  <div class="production_list_page">
    <el-form>
      <div class="search_mod">
        <div class="form_box">
          <div class="form_item">
            <div class="key">产品名称:</div>
            <el-input class="value" v-model="form.projectName"></el-input>
          </div>
          <div class="form_item">
            <div class="key">日期:</div>
            <el-date-picker
              v-model="form.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              unlink-panels
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              class="value"
            >
            </el-date-picker>
          </div>
          <div class="form_item">
            <div class="key">状态:</div>
            <el-select class="value" v-model="form.status">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="form_btns">
          <el-button type="primary" class="btn" @click="search">查询</el-button>
        </div>
      </div>
    </el-form>
    <ul class="production_list" v-if="list.length">
      <li class="production_item" v-for="(item, index) in list" :key="item.id">
        <div class="production_item_c">
          <img v-if="index === 0 && Number(item.status) === 1" src="@/assets/productionManage/shu_xin_yi_dai.png" alt="" class="production_img">
          <img v-if="index === 1 && Number(item.status) === 1" src="@/assets/productionManage/shu_xin_yi_rong.png" alt="" class="production_img">
          <img v-if="index === 2 && Number(item.status) === 1" src="@/assets/productionManage/shu_xin_yi_lian.png" alt="" class="production_img">
          <img v-if="index === 0 && Number(item.status) === 0" src="@/assets/productionManage/shu_xin_yi_dai_active.png" alt="" class="production_img">
          <img v-if="index === 1 && Number(item.status) === 0" src="@/assets/productionManage/shu_xin_yi_rong_active.png" alt="" class="production_img">
          <img v-if="index === 2 && Number(item.status) === 0" src="@/assets/productionManage/shu_xin_yi_lian_active.png" alt="" class="production_img">
          <img class="status" v-if="Number(item.status) === 0" src="@/assets/productionManage/online.png" />
          <img class="status" v-if="Number(item.status) === 1" src="@/assets/productionManage/offline.png" />
          <div class="title_box">
            <h3 class="title">
              {{ item.projectName }}
            </h3>
          </div>
          <div class="desc" v-if="index === 0">依托中小微企业自身信用，结合大数据推荐和风险评估，向符合条件的中小微企业提供日常生产经营流动贷款。</div>
          <div class="desc" v-if="index === 1">依托于核心企业的产业链，借助互联网 、大数据技术， 对供应商与核心企业之间交易数据 、订单数据 、通过风险模型分析， 为供应商提供融资服务 。</div>
          <div class="desc" v-if="index === 2">依托核心企业的整体商业信用，由核心企业（或其成员单位）向供应商开具电子债权凭证（可拆分、可流转、可融资、可持有）；</div>
          <div class="time">上线时间：{{ filterCreateTime(item.createTime) }}</div>
          <el-button
            :disabled="Number(item.status) === 1"
            type="primary"
            class="btn"
            @click="productionClick(item.id)"
          >
            立即进入
          </el-button>
        </div>
      </li>
    </ul>
    <el-empty v-else></el-empty>
  </div>
</template>

<script>
import { productionList } from '@/api/productionManage'

export default {
  data() {
    return {
      statusList: [ // 状态（0已上线 1停用）
        {
          label: '已上线',
          value: 0,
        },
        {
          label: '停用',
          value: 1,
        },
      ],
      form: {
        projectName: '',
        createTime: '',
        // createTimeStart: '',
        // createTimeEnd: '',
        status: '', // 状态（0已上线 1停用）
      },
      list: [],
    }
  },
  mounted() {
    this.getProductionList()
  },
  methods: {
    search() {
      this.getProductionList()
    },
    getProductionList() {
      const { createTime, ...rest } = this.form
      productionList({ ...rest, createTimeStart: createTime[0], createTimeEnd: createTime[1] }).then((res) => {
        if (res.code === 200) {
          this.list = res.rows
        }
      })
    },
    productionClick() {
      this.$router.push({
        path: '/shuxinyirong/productionAdmittance/list',
      })
    },
    filterCreateTime(value) {
      let time = new Date(value)
      return `${time.getFullYear()}年${time.getMonth() + 1}月${time.getDate()}日`
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.mod {
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
  border-radius: 6px;
  margin-bottom: 16px;
  padding: 20px 16px 24px;
}
.production_list_page {
  .search_mod {
    @extend .mod;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .form_box {
      flex: 1 1 auto;
      display: flex;
      flex-wrap: wrap;
      .form_item {
        width: 33.33%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &.m_b_20 {
          margin-bottom: 20px;
        }
        .key {
          width: 100px;
          flex-shrink: 0;
          text-align: right;
          margin-right: 10px;
          color: #777;
          font-size: 14px;
        }
        ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
          flex: 1 1 auto;
        }
        .value {
          flex: 1 1 auto;
        }
      }
    }
    .form_btns {
      flex-shrink: 0;
      margin-left: 40px;
      font-size: 16px;
    }
  }
  .production_list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 148px;
    .production_item {
      width: 33.33%;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      padding: 0 35px 35px;
      &:last-child {
        margin-right: 0;
      }
      .production_item_c {
        height: 429px;
        padding: 0 30px;
        box-sizing: border-box;
        background: linear-gradient( 180deg, #FFFFFF 0%, #FFFFFF 100%);
        box-shadow: 0px 2px 16px 0px rgba(7,71,191,0.24);
        border-radius: 20px;
        position: relative;
        &:hover {
          .production_img {
            transform: translate(-50%, -50%) scale(1.2);
          }
        }
        .production_img {
          display: block;
          width: 160px;
          height: 160px;
          position: absolute;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .status {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 2;
          width: 88px;
          height: 88px;
          line-height: 88px;
          text-align: center;
          border-radius: 50%;
        }
        .title_box {
          display: flex;
          justify-content: center;
          .title {
            margin-top: 139px;
            color: #333;
            font-size: 30px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 24px;
            height: 42px;
            line-height: 42px;
            position: relative;
          }
        }
        .desc {
          color: #555;
          font-size: 14px;
          margin-bottom: 20px;
          line-height: 22px;
          height: 66px;
        }
        .time {
          height: 22px;
          line-height: 22px;
          color: $theme;
          font-size: 14px;
          margin-top: 24px;
          margin-bottom: 30px;
        }
        .btn {
          border: none;
          width: 100%;
          height: 40px;
          background: linear-gradient( 90deg, #0058FF 0%, #69ADFF 100%);
          border-radius: 4px;
        }
      }
    }
  }
}
</style>
